<template>
    <div class="text-edit">
        <span class="show-text" v-if="!isEdit" @click="editText">{{text}}</span>
        <div class="edit-wrap" v-if="isEdit">
            <input ref="inputRef" v-model="inputText" @blur="inputBlur" ></input>
        </div>
    </div>
</template>

<script>
    import ajax from "@api/ajax";
    import {updateNickNameInfo} from '@api/url'
    import { EventBus } from './EventBus.js';
    export default {
        name: "textEdit",
        data () {
            return {
                text:'STRING',
                inputText:'',
                isEdit:false,//是否修改状态
            }
        },
        props:{
            info:{},//{colName:'',modelId:''}//必传 colName-字段名 modelId-模型ID
            dataText:''
        },
        watch:{
            dataText(val){
                this.text=val;
            }
        },
        mounted() {
            this.text=this.dataText;
        },
        methods:{
            editText(){
                this.inputText=this.text;
                this.isEdit=true;
                this.$nextTick(()=>{
                    this.$refs.inputRef.focus();
                })
            },
            inputBlur(e){
                let value =e.target.value;
                if(value==''){
                    this.$message('字段别名必填~');
                }else if (value!=this.text) {
                    //发起请求修改input数据
                    ajax.post(updateNickNameInfo, {
                        colName :this.info.colName,
                        modelId :this.info.modelId,
                        nickName:value,
                    }).then(res => {
                        this.text=value;
                        this.info.nickName=value;
                        this.$emit('complete',this.info);
                        EventBus.$emit('complete',this.info);
                    })
                }
                this.isEdit=false;
            },
        }
    }
</script>

<style scoped lang="stylus">
.text-edit{
    font-size 14px;
    color: gray
    position relative
    .show-text{
        min-width: 80px;
        display: flex;
    }
    .error-tip{
        position: absolute
        top:-20px
        background-color pink
        color red
        left 0
        font-size: 12px;
        padding: 0 5px;
        border-radius: 4px;
    }
    input{
        outline: none;
        border: none;
        width 90%
    }
}
</style>
